<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>accesskey</title>
  <style>
    html :focus {
      outline: 3px solid red;
    }
    
    .access-key {
      display: inline-block;
      background: #CCCCFF;
      padding: 5px;
    }
    .access-key-label {
      display: inline-block;
      background: silver;
      padding: 5px;
    }
  </style>
</head>
<body>

  <!--
    https://www.w3.org/html/wg/drafts/html/master/editing.html#assigning-keyboard-shortcuts

    Chrome does not focus upon accesskey
      -> click without prior mousedown?
      -> keywvent usable for this?

    IE11 does not perform default action on <a> - IE12 does
    IE11 does not dispatch click event (except for <input type="checkbox"> targets)
      IE12 clicks links
    IE11 does not accept <kbd>ALT E</kbd> - IE12 does (but it's english and won't accept Alt+D instead)

    IE11, IE12 and Chrome do not expose `element.accessKeyLabel`, Firefox does.
      https://www.w3.org/html/wg/drafts/html/master/editing.html#dom-accesskeylabel

    IE12 accepts ALT+key and ALT+SHIFT+key, but ALT+SHIFT+C opens current page in new window

    Multiple letter support
      no: Firefox, Internet Explorer
      yes: Chrome, Safari
  -->

  <p>MAC: To activate accesskey in Firefox and Chrome, hit <kbd>Ctrl Alt $Letter</kbd>, ($Letter: [a,…,f]) </p>
  <p>WIN: Firefox and Chrome <kbd>Alt Shift $Letter</kbd></p>
  <p>WIN: To activate accesskey in IE11, hit <kbd>Alt $Letter</kbd>, ($Letter: [a,…,f]) </p>

  <!--
    https://www.w3.org/html/wg/drafts/html/master/interactive-elements.html#using-the-accesskey-attribute-to-define-a-command-on-other-elements
    The Action of the command is to run the following steps:
      * If the element is focusable, run the focusing steps for the element.
  -->
  <p>default activation include focus?</p>
  <span id="alpha" tabindex="-1" accesskey="a 0 1">alpha</span>
  <div id="bravo" tabindex="0" accesskey="b">bravo</div>
  <div id="yankee" tabindex="0" accesskey="a b y">yankee</div>


  <!--
    Chrome: link is not focused
  -->
  <p>expect focus and default action</p>
  <a id="charlie" href="#charlie-target" accesskey="c">charlie</a>
  <input id="delta" accesskey="d" value="delta">


  <!--
    Not focusable in IE, goes straight to location bar
  -->
  <p>expect focus and default action</p>
  <input id="echo" accesskey="e" value="echo">


  <!--
    https://www.w3.org/html/wg/drafts/html/master/interactive-elements.html#using-the-accesskey-attribute-on-a-legend-element-to-define-a-command

    Chrome[Win] does not issue click event on <input type="checkbox">
  -->
  <p>should activate checkbox</p>
  <fieldset>
    <legend id="echo" accesskey="f">Fieldset Legend</legend>
    <input type="checkbox" id="echo-target">
  </fieldset>


  <!--
    https://www.w3.org/html/wg/drafts/html/master/interactive-elements.html#using-the-accesskey-attribute-on-a-label-element-to-define-a-command
  -->
  <p>should activate checkbox</p>
  <div>
    <label id="foxtrot" for="foxtrot-target" accesskey="g">Control Label</label>
    <input type="radio" name="foxtrot-target-group" id="foxtrot-target">
    <input type="radio" name="foxtrot-target-group" checked>
  </div>

  <!--
    it is not defined that [accesskey] would make an element focusable, but let's see
  -->
  <p>Focusable?</p>
  <div id="zulu" accesskey="z">zulu</div>


  <!--
    what about <button> and <select> etc?
    what about interactive media such as <video>?
  -->



  <pre></pre>
  <script>
    var log = document.querySelector('pre');

    document.addEventListener('blur', function(event) {
      log.textContent += 'blur: ' + (event.target.id || event.target.nodeName) + '\n';
    }, true);
  
    document.addEventListener('focus', function(event) {
      log.textContent += 'focus: ' + (event.target.id || event.target.nodeName) + '\n';
    }, true);

    document.addEventListener('keydown', function(event) {
      log.textContent += 'keydown[' + (event.keyCode || event.which) + ']: ' + (event.target.id || event.target.nodeName) + '\n';
    }, true);

    document.addEventListener('keyup', function(event) {
      log.textContent += 'keyup[' + (event.keyCode || event.which) + ']: ' + (event.target.id || event.target.nodeName) + '\n';
    }, true);
    
    document.addEventListener('keypress', function(event) {
      log.textContent += 'keypress[' + (event.keyCode || event.which) + ']: ' + (event.target.id || event.target.nodeName) + '\n';
    }, true);

    // click event is the fallback action
    document.addEventListener('click', function(event) {
      log.textContent += 'click: ' + (event.target.id || event.target.nodeName) + '\n';
      console.log(event);
      // Firefox, Chrome fires a "default click" ctrlKey == altKey == false, (no clientX == clientY == *X == *Y == 0)
    }, true);

    // make accessKey values visible on page
    [].forEach.call(document.querySelectorAll('[accesskey]'), function(element) {
      element.accessKey
      element.accessKeyLabel
      var span = document.createElement('span');
      span.className = 'access-key';
      span.textContent = element.accessKey;
      element.parentElement.insertBefore(span, element.nextElementSibling);
      span = document.createElement('span');
      span.className = 'access-key-label';
      span.textContent = element.accessKeyLabel || "no-label";
      element.parentElement.insertBefore(span, element.nextElementSibling);
    });

  </script>
</body>
</html>
